<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="moreplaylist,more playlist,your playlist,music video,youtube連続再生,youtube download,BGM,youtube api,shuffle play,your playlist,">
<meta name="description" content="<?php echo $this->applicationName ?> is Simple youtube player for playlist.Retrive playlist,Grid view,Auto Shuffle play,DownLoad...Enjoy Youtube Life.">
<meta name="author" content="ken kodama">
<meta name="msvalidate.01" content="B17F46571AEB8DF77AAD776AA1A4EE23" />
<title><?php echo $this->applicationName ?> | Player for YouTube Playlist</title>
<script src="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" ></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js" ></script>
<link rel="stylesheet" href="/css/blocks_it_style.css" />
<script src="/js/blocksit.min.js"></script>


<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("swfobject", "2.1");
</script>
<script src="/js/video_app.js" type="text/javascript"></script>

<script type="text/javascript">

var iOS = (navigator.userAgent.match(/(iPad|iPhone|iPod)/i) ? true : false);
var global_video_id = "<?php echo $this->default_video_id ?>";
var isShuffle = false;
var player = null;
var isAuthenticated ="<?php if ($this->secureManager->authenticated()){ echo "true";  }else{ echo "false" ; }?>";
var is_smartphone="<?php is_smartphone?>";


$(window).load(function(){
   $("body").css("zoom","100%");
});
$(document).ready(function() {
    $('#container').BlocksIt({
        numOfCol: 5,
        offsetX: 1,
        offsetY: 1,
        blockElement: '.grid'
    });
});

function layoutGrid() {

    $(document).ready(function() {
        $('#container').BlocksIt({
            numOfCol: 5,
            offsetX: 1,
            offsetY: 1,
            blockElement: '.grid'
        });
    });
    return true;
}
function initloadPlayer() {
    fGetScript();
}
function fGetScript() {
    $.ajax({
        url: 'http://www.youtube.com/player_api/',
        dataType: 'script',
        success: function(data) {
            if (isShuffle) {
                loadPlayer(global_video_id);
            }
        },
        error: function(xhr, status, thrown) {
            fGetScript();
        }
    });
}
function loadVideoByVideoId(videoID) {
    player.loadVideoById(videoID);
    document.getElementById('videoInfo').innerHTML ="<form><p>videoid:" + videoID + "</p><p>Add to new playlist <input type='text' name='' value='' style='width:100px'/><input type='hidden' name='video_id' value='" +videoID+ "'/></form>";
    ytVideoApp.showDownLoadLink(videoID);
  
}
function loadPlayer(videoID) {
    player = new YT.Player(
    'player', {
        width: '360', 
        height: '260', 
        videoId: videoID, 
        events: {
            "onStateChange": onPlayerStateChange 
        },
        playerVars: {
            'rel': 1, // 関連動画の有無(default:1)
            'showinfo': 0, // 動画情報表示(default:1)
            'controls': 1, // コントロール有無(default:1)
            'autoplay': 1,
            'enablejsapi': 1,
            'allowScriptAccess': 'always'
        }
    }
);
    $('#player_area').html(player.getIframe());
}
function onPlayerStateChange(event) {
    if (event.data == 0) {
        shuffle();
    }
}
function dbg(str) {
    $("#debuglog").val(str + "\n" + $("#debuglog").val());
    if (window.console && window.console.log) {
        console.log(str);
    }
}
function shuffle() {
    isShuffle = true;
   
    var video_ids_csv = document.f2.csv_video_ids.value;
    if( video_ids_csv == "undefind") {
        return;
    }
    var video_ids = video_ids_csv.split(',');
    var index = Math.floor(Math.random() * (video_ids.length));
    global_video_id = video_ids[index];
    loadVideoByVideoId(video_ids[index]);
    document.getElementById("player").loadVideoById(global_video_id);
}
function _run() {
    initloadPlayer();
}
function loadBodyAction(){
    if(isAuthenticated=="true"){
        ytVideoApp.retrievePlaylists();
    }
    return;
}


window.onYouTubeIframeAPIReady = function() {
    loadPlayer(global_video_id);
    ytVideoApp.showDownLoadLink(global_video_id);
}

 google.setOnLoadCallback(_run);

//$(document).ready(function(){
//});
</script>
</head>

<body onload="loadBodyAction();">

<header id="header">
<div class="logo"> <a href="/Index"><img src="/images/<?php echo $this->applicationName ?>.png" title="<?php echo $this->applicationName ?>" alt="<?php echo $this->applicationName ?>" /></a></div>
    <div id="keyword_area" data-role="fieldcontain">
    <form id="keyowordForm" action="javascript:void(0)"> 
    <div class="ui-toolbar ui-widget-header ui-helper-clearfix" style="padding:5px;">
    <span style="position: absolute;" class="btnSearch ui-state-default" title="search">
    <span class="ui-icon ui-icon-search"></span>
    </span>
    <input type="search"  data-mini="true" data-prevent-focus-zoom="true" name="keyword" id="keyword" value="<?php echo $this->keyword ?>"
    onkeydown="if(event.keyCode == 13){ytVideoApp.feeds_from_keyword(this.value,null);}" placeholder="SEARCH" style="width:200px; "/>
    </div>
    </form>
    </div>
<table align="right">
<tr>
<td nowrap>
</td>
<td nowrap>
         <?php if ($this->secureManager->authenticated())
                { ?>
                  <!--  <div id="searchResultsVideoList"><form id="navigationForm" action="javascript:void(0)"> </form> -->
       <?php } ?>
       
</td >
<td nowrap>
<!--
see
http://unformedbuilding.com/articles/css-dropdown-menu-idea/
-->
<div class="nav" style="float:left;padding-top: 5px;">
            <ul >
                <li style="margin-right: 30px"><a  data-role="button" href="#" onclick="shuffle();return false;"><img src="/images/shuffle.png" /></a></li>
                <?php if (!$this->secureManager->authenticated())
                { ?>
                    <li style="margin-right: 30px"><a data-role="button"  data-ajax="false"  href='/Index/oauth'  ><img src="/images/login.png"/></a></li>
                <?php } ?>
                <?php if ($this->secureManager->authenticated())
                { ?>
                    <li style="margin-right: 30px"><a  data-role="button" data-ajax="false"   href="/Index/oauth?logout"  ><img src="/images/logout.png"/></a></li>
                <?php } ?>
            </ul>
</div>
</td>
<td>
    <div id="searchResultsVideoList"><form id="navigationForm" action="javascript:void(0)"> </form></div>
</td>
</tr>
</table>


</header>


<div id="main_content"  >

<div id="container" >
 <?php echo "" . $this->grid_tag . ""; ?>
</div><!--container-->



<footer id="footer" data-role="footer"  data-position="fixed" >
<div id="palyer_wrapper" data-role="collapsible" data-collapsed="false">
 <table class="player_table" align="center">
  <tr>
   <td align="left">
    <div id="ad">
              <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                <!-- BGM TUBE -->
                <ins class="adsbygoogle"
                    style="display:inline-block;width:300px;height:250px"
                    data-ad-client="ca-pub-4498051423313001"
                    data-ad-slot="1578894666"></ins>
                <script>
                (adsbygoogle = window.adsbygoogle || []).push({});
                </script>
    </div>
   </td>
   <td align="left">
     <div id="navigation_wrapper">
            <ul class="navigations">
            </ul>
        </div>
   </td>
   <td nowrap>
    <div id="player_area" ><div id="videoDiv" ></div><div id='player' ></div></div>
   </td>
   <td nowrap>
       
    <div id="downloadInfo"></div>
    
   </td>
   <td nowrap>
                        <div id="social_area">
                        <form name="f1" id="f1">
                            <div id="share_feed_area">
                                <div id='gplus'>
                                    <script type='text/javascript'>
                                    (function() {
                                        var po = document.createElement('script');
                                        po.type = 'text/javascript';
                                        po.async = true;
                                        po.src = 'https://apis.google.com/js/plusone.js';
                                        var s = document.getElementsByTagName('script')[0];
                                        s.parentNode.insertBefore(po, s);
                                    })();
                                    </script>
                                    <?php echo "<g:plus action='share' href='" . $this->feed_share_url . "'></g:plus>"; ?>
                                </div>
                                <div id="share_url" >
                                    <p>THIS URL:</p>
                                <input type="text" id="share_url_shorten" size="20" maxlength="20" value="<?php echo $this->secureManager->get_tiny_url($this->feed_share_url, $developerKey) ?>"  />
                                <input type="hidden" name="feed_share_url" value="<?php echo $this->feed_share_url ?>" />
                                </div>
                            </div><!--share_feed_area-->
                        </form>
                    </div><!--social_area-->
   </td>
   <td>
       <div id='videoInfo'></div>
   </td>
 </tr>
</table>
</div>
<p>copyright (c) 2013 ken kodama. All rights reserved.</p>
</footer>
</div>
<!--google analytics-->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-37241315-1']);
_gaq.push(['_trackPageview']);
(function() {
    var ga = document.createElement('script');
    ga.type = 'text/javascript';
    ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ga, s);
})();
</script>
<script>
layoutGrid();
ytVideoApp.showDownLoadLink(global_video_id);

setTimeout("shuffle", 5000);
</script>


<input 
 type="hidden"
 name="session"
 value="<?php/* print_r($_SESSION)*/?>"/>
</body>

</html>
